<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 文件监控</el-breadcrumb-item>
                <el-breadcrumb-item>FTP服务器管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <el-col :span="1">
                    <el-button type="primary" @click="dialogVisible = true">新建</el-button>
                </el-col>
                <el-col :span="2" :offset="17">
                    <span>FTP服务器</span>
                </el-col>
                <el-col :span="2">
                    <el-select placeholder="请选择" v-model="ftpValue" clearable>
                        <el-option key="1" label="tomcat" value="1">Tomcat</el-option>
                        <el-option key="2" label="Apatch" value="2">Apatch</el-option>
                    </el-select>
                </el-col>
                <el-col :span="1" class="ml10">
                    <el-button>查找</el-button>
                </el-col>
            </el-row>
            <el-table
                ref="multipleTable"
                :data="tableData"
                border
                style="width: 100%; margin-top:20px">
                <el-table-column
                    type="index"
                    label="序号"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="jknr"
                    label="FTP服务器别名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="sjy"
                    label="FTP IP地址"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="协议">
                </el-table-column>
                <el-table-column
                    prop="port"
                    label="端口">
                </el-table-column>
                <el-table-column
                    label="状态">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text">编辑</el-button>
                        <el-button type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-dialog
                title="FTP服务器"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose"
            >
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>IP地址：</span></el-col>
                    <el-col :span="15">
                        <el-select placeholder="请选择" v-model="ftpValue" clearable>
                            <el-option key="1" label="tomcat" value="1">SFTP/SSH</el-option>
                            <el-option key="2" label="Apatch" value="2">Apatch</el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>端口：</span></el-col>
                    <el-col :span="15">
                        <el-input></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>用户名：</span></el-col>
                    <el-col :span="15">
                        <el-input></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>密码：</span></el-col>
                    <el-col :span="15">
                        <el-input></el-input>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button>连接测试</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ftpValue:'1',
            dataSource:"1",
            dialogVisible: false,
            tableData:[{
                jknr:'收入接口文件',
                sjy:'100.100.0.1',
                type:'SFTP/SSH',
                port:'22'
            },{
                jknr:'收入接口文件',
                sjy:'100.100.0.1',
                type:'SFTP/SSH',
                port:'22'
            }]
        }
    },
    methods:{
        handleClick(row) {
            console.log(row);
        },
        handleCreate() {
            this.$router.push({path:'/newsql'})
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        }
    }
}
</script>
<style>
.el-button+.el-button{
    margin-left:0;
}
</style>


